import React,{useState,useEffect,useRef} from 'react';
import { Space, Card, Table, Tag, DatePicker, Form, Input, Checkbox, Button, Select, Modal, InputNumber, Row, Col  } from 'antd';
import {
  ExclamationCircleOutlined, SearchOutlined,
  PlusOutlined,Loading3QuartersOutlined
} from '@ant-design/icons';
const { Column, ColumnGroup } = Table;
const { RangePicker } = DatePicker;
import './index.less'


function GroupSub(props) {
  /*  表格使用
      1.通过 Form.useForm 对表单中数据域进行交互
      const [form] = Form.useForm();
      2.form.setFieldsValue()
      3.form.getFieldValue()
      4.form.getFieldsValue()
      5.form.validateFields()
      6.form.submit()
      7.form.resetFields()
  * */
  const searchFormRef = useRef('searchRef')
  const [searchForm] = Form.useForm();
  const [search_data,set_search_data]= useState({
    firstName: "",
    lastName:"",
  })
  const [editForm] = Form.useForm();
  const [edit_data,set_edit_data]= useState({
    firstName: "",
    lastName:"",
  })
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const [page,set_page] = useState(1)
  const [page_size,set_page_size] = useState(10)
  const [total,set_total]=useState()
  const [table_data,set_table_data]=useState([])
  const [modal, contextHolder] = Modal.useModal();
  const [del_modal_show,set_del_modal_show] = useState(false)
  const [edit_modal_show,set_edit_modal_show] = useState(false)
  const [edit_type,set_edit_type] = useState()
  const [col_item,set_col_item]= useState({})

  const changePage = (page, pageSize)=>{
    if(pageSize !== page_size){
      set_page_size(pageSize)
      if(page !== 1){
        set_page(1)
      }
    }else{
      set_page(page)
    }
  }
  useEffect(()=>{
    let data = [
      {key: '001',firstName: 'John1',lastName: 'jack1',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '002',firstName: 'John2',lastName: 'jack2',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '003',firstName: 'John3',lastName: 'lucy3',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '004',firstName: 'John4',lastName: 'lucy4',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '005',firstName: 'John5',lastName: 'lucy5',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '006',firstName: 'John6',lastName: 'Yiminghe6',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '007',firstName: 'John7',lastName: 'Yiminghe7',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '008',firstName: 'John8',lastName: 'Yiminghe8',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '009',firstName: 'John9',lastName: 'Brown9',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '0010',firstName: 'John10',lastName: 'Brown10',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '0011',firstName: 'John11',lastName: 'Brown11',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '0012',firstName: 'John12',lastName: 'Brown12',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
    ]
    set_table_data(data)
    set_total(data.length)
  },[])


  const toQuery = ()=>{
    console.log('useRef--------',searchFormRef.current.getFieldValue(),searchFormRef.current)
    console.log('toQuery-----',searchForm.getFieldsValue())
  }
  const toReset = ()=>{
    set_search_data({
      firstName: "",
      lastName:"",
    })
  }
  const onFinishFailed=()=>{

  }
  const changeLastName=(val)=>{
   console.log('changeLastName---',val)
  }
  const openDelModal=(record)=>{
    console.log('record---',record)
    set_col_item(record)
    set_del_modal_show(true)
  }
  const delCol=()=>{
    set_del_modal_show(false)
    let data = table_data
    set_table_data(data)
    set_total(data.length)
  }
  const modalCancel=()=>{
    set_del_modal_show(false)
  }
  const openEditModal = (record,type) => {
    if(type){
      set_col_item(record)
      editForm.setFieldsValue(record)
    }
    set_edit_type(type)
    set_edit_modal_show(true)
  }
  const editSave = () => {
    console.log(editForm.getFieldsValue())
    set_edit_modal_show(false)
  }
  const editCancel = () => {
    editForm.resetFields()
    set_edit_modal_show(false)
  }
  const modalStyles = {
    content: {
      width:'700px'
    },
  };


  return (
    <div>
      <Space direction="vertical" style={{ display: 'flex' }}>
        <Card>
              <Form
                  ref={searchFormRef}
                  form={searchForm}
                  layout="inline"
                  size="default"
                  initialValues={search_data}
                  onFinishFailed={onFinishFailed}
                >
                  <Form.Item label="First Name" name="firstName">
                    <Input placeholder={'请输入'}/>
                  </Form.Item>
                  <Form.Item label="lastName" name="lastName">
                    <Select
                      defaultValue="Brown"
                      style={{ width: 120 }}
                      onChange={changeLastName}
                      options={[
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                        { value: 'Brown', label: 'Brown' },
                      ]}
                    />
                  </Form.Item>
                  <Form.Item>
                    <Button icon={<Loading3QuartersOutlined />} onClick={toReset} className="mr20">重置</Button>
                    <Button icon={<SearchOutlined />} type="primary" className="mr20" onClick={toQuery}>搜索</Button>
                    <Button icon={<PlusOutlined />} className="success-btn" onClick={openEditModal}>新增</Button>
                  </Form.Item>
          </Form>
        </Card>
        <Card>
          <Table
            dataSource={table_data}
            bordered={true}
            size={'small'}
            pagination={{
              current:page,
              pageSize:page_size,
              total:total,
              showQuickJumper:true,
              showSizeChanger:true,
              pageSizeOptions:[5,10,20],
              onChange:changePage,
            }}
          >
            <ColumnGroup title="Name">
              <Column title="First Name" dataIndex="firstName" key="firstName" />
              <Column title="Last Name" dataIndex="lastName" key="lastName" />
            </ColumnGroup>
            <Column title="Age" dataIndex="age" key="age" />
            <Column title="Address" dataIndex="address" key="address" />
            <Column
              title="Tags"
              dataIndex="tags"
              key="tags"
              render={(tags) => (
                <>
                  {tags.map((tag) => (
                    <Tag color="blue" key={tag}>
                      {tag}
                    </Tag>
                  ))}
                </>
              )}
            />
            <Column
              title="Action"
              key="action"
              render={(_, record) => (
                <Space size="small">
                  <Button type="link" block onClick={openEditModal.bind(_,record,'look')}>查看</Button>
                  <Button type="link" block onClick={openEditModal.bind(_,record,'edit')}>编辑</Button>
                  <Button type="link" danger onClick={openDelModal.bind(_, record)}>删除</Button>
                </Space>
              )}
            />
          </Table>
        </Card>
        <Modal
          title="确定要删除此条数据吗？"
          open={del_modal_show}
          onOk={delCol}
          onCancel={modalCancel}
          okText="确认"
          cancelText="取消"
        />
        <Modal
          styles={modalStyles}
          open={edit_modal_show}
          onOk={editSave}
          onCancel={editCancel}
          okText="确认"
          cancelText="取消"
        >
          <Form
            {...layout}
            form={editForm}
            size="default"
            initialValues={edit_data}
            onFinishFailed={onFinishFailed}
          >
            <Row>
              <Col span={12}>
                <Form.Item label="First Name" name="firstName" rules={[{ required: true }]}>
                  <Input placeholder={'请输入'} disabled={edit_type==='look'}/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="lastName" name="lastName">
                  <Select
                    defaultValue="Brown"
                    style={{ width: 120 }}
                    onChange={changeLastName}
                    disabled={edit_type==='look'}
                    options={[
                      { value: 'jack', label: 'Jack' },
                      { value: 'lucy', label: 'Lucy' },
                      { value: 'Yiminghe', label: 'yiminghe' },
                      { value: 'Brown', label: 'Brown' },
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="age" name="age" rules={[{ type: 'number', min: 0, max: 150 }]}>
                  <InputNumber disabled={edit_type==='look'}/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="address" name="address">
                  <Input.TextArea  disabled={edit_type==='look'}/>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </Space>
    </div>
  );
}

export default GroupSub;
